﻿@page
@model FytSoa.Web.Pages.FytAdmin.Cms.VideoModel
@{ ViewData["Title"] = "视频管理";
                Layout = AdminLayout.Pjax(HttpContext); }
<div id="content-body">
    <div class="list-wall">
        <div class="layui-form list-search">
            <div class="layui-inline">
                <input class="layui-input" id="key" autocomplete="off" placeholder="请输入关键字查询">
            </div>
            <div class="layui-inline">
                <select id="attr" lay-search="">
                    <option value="0">全部</option>
                    <option value="1">推荐</option>
                </select>
            </div>
            <button type="button" class="layui-btn layui-btn-sm" data-type="toolSearch"><i class="layui-icon layui-icon-search"></i> 搜索</button>
        </div>
        <table class="layui-hide" id="tablist" lay-filter="tool"></table>
    </div>
    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
            <button type="button" class="layui-btn layui-btn-sm" lay-event="toolAdd"><i class="layui-icon"></i> 新增</button>
            <button type="button" class="layui-btn layui-btn-sm" lay-event="toolDel"><i class="layui-icon"></i> 删除</button>
        </div>
    </script>
    <input type="hidden" id="isSave" value="0" />
    <script type="text/html" id="switchTpl">
        <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" disabled lay-text="已审核|未审核" lay-filter="statusedit" {{ d.audit==1?'checked':''}}>
    </script>
    <script>
        var active, layuiIndex;
        layui.config({
            base: '/themes/js/modules/'
        }).use(['table', 'layer', 'jquery', 'common', 'form'],
            function () {
                var table = layui.table,
                    layer = layui.layer,
                    $ = layui.jquery,
                    os = layui.common,
                    form = layui.form;
                form.render();
                table.render({
                    elem: '#tablist',
                    toolbar: '#toolbar',
                    headers: os.getToken(),
                    url: '/api/video/getpages',
                    cols: [
                        [
                            { type: 'checkbox', fixed: 'left' },
                            {
                                field: 'title', title: '标题', fixed: 'left',minWidth:300, templet: function (res) {
                                    return '<a href="javascript:void(0)" lay-event="edit" class="text-color">' + res.title + '</a>';
                                }
                            },
                            {
                                field: 'attr', width: 100, title: '属性', templet: function (res) {
                                    return attrHtml(res);
                                }
                            },
                            { field: 'subTitle', width: 200, title: '副标题' },
                            {
                                field: 'videoCover', width: 100, title: '封面', templet: function (res) {
                                    return '<img src="'+res.videoCover+'" style="width:60px; height:40px;" />';
                                } },
                            { field: 'addTime', width: 200, title: '添加时间' }
                        ]
                    ],
                    page: true,
                    id: 'tables'
                    , response: {
                        statusCode: 200
                    }
                    , parseData: function (res) {
                        console.log(res)
                        return {
                            "code": res.statusCode,
                            "msg": res.message,
                            "count": res.totalPages,
                            "data": res.data.items
                        };
                    },
                    where: {
                        id:'@Model.ColumnId'
                    }
                });

                var type = 0, selStr = '';
                active = {
                    reload: function () {
                        table.reload('tables',
                            {
                                page: {
                                    curr: 1
                                },
                                where: {
                                    id:'@Model.ColumnId',
                                    attr: $("#attr").val(),
                                    key: $('#key').val()
                                },
                                done: function () {
                                }
                            });
                    },
                    //添加栏目
                    toolAdd: function () {
                        active.goModify('?column=@Model.ColumnId');
                    },
                    goModify: function (parm = '') {
                        var winH = $(window).height(), winW = $(window).width();
                        layuiIndex = os.OpenRight('视频管理', "/fytadmin/cms/videomodify" + parm, winW - 220 + 'px', winH - 61 + 'px', function () {
                            if (parseInt($("#isSave").val()) === 1) {
                                $("#isSave").val('0');
                                active.reload();
                            }
                        }, function () {
                            active.closeCloumnModify();
                        });
                    },
                    closeCloumnModify: function () {
                        var $layero = $('#layui-layer' + layuiIndex);
                        $layero.animate({
                            left: $layero.offset().left + $layero.width()
                        }, 300, function () {
                            layer.close(layuiIndex);
                        });
                        return false;
                    },
                    toolSearch: function () {
                        active.reload();
                    },
                    toolDel: function () {
                        var checkStatus = table.checkStatus('tables')
                            , data = checkStatus.data;
                        if (data.length === 0) {
                            os.error("请选择要删除的项目~");
                            return;
                        }
                        var str = '';
                        $.each(data, function (i, item) {
                            str += item.id + ",";
                        });
                        layer.confirm('确定要执行批量删除吗？', function (index) {
                            layer.close(index);
                            var loadindex = layer.load(1, {
                                shade: [0.1, '#000']
                            });
                            os.ajax('api/video/delete/', { parm: str }, function (res) {
                                layer.close(loadindex);
                                if (res.statusCode === 200) {
                                    active.reload();
                                    os.success('删除成功！');
                                } else {
                                    os.error(res.message);
                                }
                            });
                        });
                    }
                };
                table.on('toolbar(tool)', function (obj) {
                    active[obj.event] ? active[obj.event].call(this) : '';
                });
                $('.list-search .layui-btn').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
                //监听指定开关
                form.on('switch(switch)', function (data) {
                    type = this.checked ? 0 : 1;
                });
                //监听工具条
                table.on('tool(tool)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'edit') {
                        active.goModify('?id=' + data.id);
                    }
                });

            });
        function attrHtml(e) {
            var h = '';
            if (e.isTop) {
                h += '<span class="layui-badge layui-bg-cyan">推荐</span>';
            }
            else {
                h += '<span class="layui-badge">否</span>';
            }
            return h;
        }
    </script>
</div>